<template>
	<view>
		<u-navbar :title="$t('cuisine.navText_classify')" placeholder :autoBack="true" bgColor="#fff"></u-navbar>
		<view class="content">
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_3')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_3')" :adjustPosition="false" border="none" v-model="form.name"></u--input>
			</view>
			<view class="title">
				<!-- <view class="xing">*</view> -->
				<view>{{$t('cuisine.input_4')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_4')" :adjustPosition="false" border="none" v-model="form.name_copy"></u--input>
			</view>
			<view class="title">
				<view class="xing">*</view>
				<view>{{$t('cuisine.input_5')}}</view>
			</view>
			<view class="input">
				<u--input :placeholder="$t('cuisine.searchInput_5')" :adjustPosition="false" border="none" v-model="form.weigh" type="number"></u--input>
			</view>
			<u-button :text="$t('cuisine.submitBtn')" shape="circle" :customStyle="btnStyle" @click="submit"></u-button>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import graceChecker from '@/mixins/formVerify.js'
	export default {
		data() {
			return {
				btnStyle: {
					background: "#FFC100",
					border: "none",
					height: "80rpx",
					color:"#fff",
					width:"90%",
					margin:"40px auto"
				},
				form:{
					name:"",//分类名称
					name_copy:"",//分类名称(维语)
					weigh:"",//权重
					image:"",//图片
				},
				rule:{
					name:{
						type: String,
						required: true,
						message: "请输入分类名称"
					},
					name_copy:{
						type: String,
						required: false,
						message: "请输入分类名称(维语)"
					},
					weigh:{
						type: String,
						required: true,
						message: "请输入分类权重"
					},
					image:{
						type: String,
						required: false,
						message: "请上传图片"
					}
				}
			};
		},
		methods:{
			submit(){
				let transit = graceChecker.RuleValidation(this.form, this.rule);
				if(transit){
					uni.showLoading({
						title: "添加中...",
						mask:true
					})
					this.$http.post('wanlshop/shop/addCategory', this.form).then(res => {
						uni.hideLoading()
						if (res.code == 1) {  
							setTimeout(() => {
								this.$refs.uToast.show({
									type: 'default',
									message: "添加成功",
									duration: 1000,
									complete() {
										uni.navigateBack()
									}
								})
							}, 150)
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
 .content{
	 padding: 24rpx;
	 .title {
	 	display: flex;
	 	color: rgba(33, 33, 33, 1);
	 	font-size: 30rpx;
	 	margin-bottom: 28rpx;
	 
	 	.xing {
	 		color: rgba(255, 48, 48, 1);
	 		font-size: 32rpx;
	 		margin-right: 10rpx;
	 	}
	 }
	 .input {
	 	border: 1px solid rgba(227, 229, 232, 1);
	 	border-radius: 10rpx;
	 	padding: 20rpx;
	 	margin-bottom: 40rpx;
	 }
	 .image {
	 	width: 320rpx;
	 	height: 196rpx;
	 	margin-bottom: 40rpx;
	 }
 }
</style>
